import React, { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { privateRoutes } from '@/router/routes'
import AppBar from './components/app-bar'
import Menu from './components/menu'
import {
  Wrapper,
  Content,
  Container,
  getStyledMenu,
} from './style'

const StyledMenu = getStyledMenu(Menu)

const App: React.FC = (props) => {
  const { children } = props
  const history = useHistory()
  const [menuVisible, setMenuVisible] = useState(true)

  function handleToggleMenu (): void {
    setMenuVisible(menuVisible => !menuVisible)
  }

  function handleLogout (): void {
    localStorage.clear()
    history.push('/login')
  }

  return (
    <Wrapper>
      <StyledMenu visible={menuVisible} config={privateRoutes} />
      <Container>
        <AppBar handleToggleMenu={handleToggleMenu} handleLogout={handleLogout} />
        <Content>{children}</Content>
      </Container>
    </Wrapper>
  )
}

export default App
